<!--
 * @Author: GKN
 * @Date: 2023-08-21 09:21:29
 * @LastEditTime: 2024-01-22 16:27:49
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\view\ie\index.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <div class="mainPadding p-t">
    <div class="max-w">
    <div class="flex flex-j-s">
      <div class="font-Breadcrumbs"></div>
      <el-breadcrumb separator="|">
        <el-breadcrumb-item v-for="(item,i) in breadcrumb_list" :key="i" v-show="item.isNav==1" @click="goList(item,i)" class="cursor-p">{{ item.name }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="MarT withFull">
        <el-row :gutter="20">
            <el-col :span="16"><div class="ad-view">
                <adImgView :src="ad_list1.length>0?ad_list1[0].img:''" @click="proxy.$comJs.openUrl(ad_list1.length>0?ad_list1[0]:'')" />
            </div></el-col>
            <el-col :span="8"><div class="ad-view"> 
                <adImgView :src="ad_list1.length>1?ad_list1[1].img:''" @click="proxy.$comJs.openUrl(ad_list1.length>1?ad_list1[1]:'')" />
            </div></el-col>
        </el-row>
    </div>
    <div class="MarT withFull" v-if="module_list[0].show">
        <Card1 title="企业巡礼" :more="true" @moreClick="more(module_list[0].id,'企业巡礼')">
            <template v-slot:main1>
                <div style="height: 445px;">
                    <div class="cursor-p" style="height: 428px;border-radius:6px;overflow:hidden;">
                        <myEmpty v-if="!dataOpenList||dataOpenList.length==0" />
                        <Accordion class="three__box__text" :list="dataOpenList" :title="title"></Accordion>
                    </div>
                    <!-- <div class="font-Breadcrumbs font-text-al-l MarT35"></div> -->
                </div>
            </template>
        </Card1>
    </div>
    <div class="MarT withFull">
        <Card1 title="面对面" :more="false">
            <template v-slot:right>
                <div class="flex a-tab">
                    <div v-for="(item,i) in mdm_tabs" :key="i" :class="i==mdm_tab_index?'a-tab-p-active a-tab-p':'a-tab-p'" @click="tabclick1(item,i)">{{ item.name }}</div>
                </div>
            </template>
            <template v-slot:main1>
                <div style="height: 300px;" class="po-re">
                    <mySpin v-if="mdm_loading" type="dot-typing" />
                    <myEmpty v-if="!mdm_list||mdm_list.length==0" />
                    <el-carousel v-if="mdm_list.length>0" width="100%" height="280px" direction="horizontal" indicator-position="none" :interval="4500">
                        <el-carousel-item v-for="item in mdm_list" :key="item">
                            <div class="flex ad1-view" style="height: 100%;">
                                <div v-for="(items,is) in item" :key="is" style="width:20%;height: 100%;"  @click="goInfo(items,'面对面')" class="po-re">
                                    <imgView :src="items.thumb" />
                                    <div class="po-ab0 xf-font-small" style="width: 100%;text-align: left;">
                                        <div class="omit">{{items.tag }}</div>
                                        <div class="omit">{{items.name }}</div>
                                    </div>
                                </div>
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
                
            </template>
        </Card1>
    </div>
    <div class="MarT withFull">
        <div class="ad-view">
            <adImgView :src="ad_list2.length>0?ad_list2[0].img:''" @click="proxy.$comJs.openUrl(ad_list2.length>0?ad_list2[0]:'')" />
        </div>
    </div>
    <!-- 企业管理 -->
    <div class="MarT withFull" v-if="module_list[1].show">
        <Card1 :title="module_list?module_list[1].name:''" :more="true" @moreClick="more(module_list[1].id,'企业管理')">
            <template v-slot:main1>
                <myCard :list="qygl_list" :title="module_list?module_list[1].name:''"/>
            </template>
        </Card1>
    </div>
    <!-- 企业党建 -->
    <div class="MarT withFull" v-if="module_list[2].show">
        <Card1 :title="module_list?module_list[2].name:''" :more="true" @moreClick="more(module_list[2].id,'企业党建')">
            <template v-slot:main1>
                <myCard :list="qydj_list" :title="module_list?module_list[2].name:''"/>
            </template>
        </Card1>
    </div>
    <!-- 企业科创 -->
    <div class="MarT withFull" v-if="module_list[3].show">
        <Card1 :title="module_list?module_list[3].name:''" :more="true" @moreClick="more(module_list[3].id,'企业科创')">
            <template v-slot:main1>
                <myCard :list="qykc_list" :title="module_list?module_list[3].name:''"/>
            </template>
        </Card1>
    </div>
    <div class="MarT withFull">
        <el-row :gutter="20">
            <!-- 媒体看台 -->
            <el-col :span="16">
                <Card1 :title="module_list?module_list[4].name:''" :more="true" @moreClick="more(module_list[4].id,'媒体看台')" v-if="module_list[4].show">
                    <template v-slot:main1>
                        <div style="min-height:300px;" class="p-t">
                            <myEmpty v-if="!mtkt_list||mtkt_list.length==0" />
                            <el-row :gutter="20">
                                <el-col :span="12" v-for="(item,i) in mtkt_list" :key="i" @click="goInfo(item,'媒体看台')" class="cursor-p" style="margin-bottom:35px;">
                                    <div class="flex">
                                        <div style="height: 100px;" class="with50 border-r6 shadow-1">
                                            <img v-if="item.thumb" :src="proxy.$api.prefix_img+item.thumb" alt="" class="ad-img">
                                            <el-empty v-if="!item.thumb" :image-size="10" description="暂无图片"  />
                                        </div>
                                        <div class="with50 flex flex-align" style="height: 100px;margin-left:20px;">
                                            <div class="font-title font-text-al-l omit-3">{{ item.name }}</div>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </template>
                </Card1>
            </el-col>
            <el-col :span="8">
                <Card1 title="阅读推荐榜" :more="false" border="border-bottom:1px solid #fbb8b4;" style="border:1px solid #fbb8b4;border-radius:6px;">
                    <template v-slot:img>
                        <img src="@/assets/img/icon95.png" alt="" class="title-icon">
                    </template>
                    <template v-slot:main>
                        <div style="min-height:300px;" class="p-t">
                            <myEmpty v-if="!ydtj_list||ydtj_list.length==0" />
                            <div v-for="(item,i) in ydtj_list" :key="i" class="widthFull MarB-30 cursor-p" @click="goInfo(item,'阅读推荐榜')">
                                <el-row :gutter="20">
                                    <el-col :span="2"><div class="bjview">{{ i+1 }}</div></el-col>
                                    <el-col :span="22"><div class="omit font-text-al-l">{{ item.name }}</div></el-col>
                                </el-row>
                            </div>
                        </div>
                        
                    </template>
                </Card1>
            </el-col>
        </el-row>
    </div>
    <!-- <div class="MarT withFull">
        <Card1 title="品牌推荐" :more="true" @moreClick="more6">
            <template v-slot:main1>
                <div class="flex flex-w">
                    <div v-for="(item,i) in pptj_list" :key="i" style="width:20%;height:132px;padding-right:20px;margin-bottom:20px;" >
                        <div style="box-shadow:4px 0px 7px 0px rgba(5, 5, 5, 0.3);" class="border-r6">
                            <img class="ad-img" :src="item.img" alt="">
                        </div>
                    </div>
                </div>
            </template>
        </Card1>
    </div> -->
    </div>
  </div>
</template>

<script setup>
    import CryptoJS from 'crypto-js';
    import { ref,reactive, onMounted,getCurrentInstance } from "vue";
    const { proxy } = getCurrentInstance();
    import { useRoute, useRouter } from "vue-router";
    const Router = useRouter();
    // -----------------------------------------------------
    import Card1 from '../components/card1.vue';
    import Accordion from '../components/accordion.vue'
    import myCard from './card1.vue';
    // ------------------------------------------------------
    // 原始模块
    const module_list = ref([
        {id:14,name:'企业巡礼',show:false},
        {id:15,name:'企业管理',show:false},
        {id:16,name:'企业党建',show:false},
        {id:17,name:'企业科创',show:false},
        {id:18,name:'媒体看台',show:false},
        {id:146,name:'面对面',show:false},
    ])
    // 导航下对应模块
    const list_children = proxy.$comJs.extract(JSON.parse(localStorage.getItem( 'headerTabs' )),JSON.parse(CryptoJS.AES.decrypt(Router.currentRoute.value.query.ob,'name').toString(CryptoJS.enc.Utf8)),'name')[0].children
    const title = proxy.$comJs.extract(JSON.parse(localStorage.getItem( 'headerTabs' )),JSON.parse(CryptoJS.AES.decrypt(Router.currentRoute.value.query.ob,'name').toString(CryptoJS.enc.Utf8)),'name')[0].name
    // 面包屑
    const breadcrumb_list = list_children
    // 子栏目跳转
    const goList=(item,i)=>{
        Router.push({
            name:'listTab',
            query:{
                ob:proxy.$comJs.encry({
                    title:item.name,
                    i:i,
                    titleList:list_children,
                    firstTitle:proxy.$comJs.extract(JSON.parse(localStorage.getItem( 'headerTabs' )),JSON.parse(CryptoJS.AES.decrypt(Router.currentRoute.value.query.ob,'name').toString(CryptoJS.enc.Utf8)),'name')[0].name
                })
            }
        });
    }
//---------------- 广告------------
    const ad_list1 = ref([])
    const ad_list2 = ref([])
    const getAd=()=>{
        proxy.$comJs.getAd(proxy.$comJs.extract(JSON.parse(localStorage.getItem( 'headerTabs' )),JSON.parse(CryptoJS.AES.decrypt(Router.currentRoute.value.query.ob,'name').toString(CryptoJS.enc.Utf8)),'name')[0].id,0,function(res){
            var list1 = [],list2=[],list3=[],list4=[],list5=[]
            res.list.map((item)=>{
                if(item.nid == 14){
                    list1.push(item)
                }
                if(item.nid == 146){
                    list2.push(item)
                }
            })
            ad_list1.value = list1.length>0?list1:[]
            ad_list2.value = list2.length>0?list2:[]

        })
    }
    getAd()
//--- 广告（end）------------
    // 企业巡礼
    const dataOpenList = ref([])
    const getdataOpenList=()=>{
        const id = module_list.value[0].id
        proxy.$comJs.getNewList(10,id,{prevTag:0,nextTag:0},'',(data)=>{
            dataOpenList.value = data.list
        })
    }
    const more1 =(type)=>{
    }
    // 面对面
    const mdm_tabs = ref([])
    const mdm_tab_index = ref(-1)
    const mdm_list = ref([])
    const mdm_loading = ref(false)
    const newlist=(id)=>{
        mdm_loading.value = true
        proxy.$comJs.getNewList(100,146,{prevTag:0,nextTag:0},id,(data)=>{
            mdm_list.value = proxy.$comJs.carveUp(data.list,5)
            setTimeout(()=>{
                mdm_loading.value = false
            },200)
        })
    }
    const getTheme=()=>{
        proxy.$http.request(proxy.$api.tag+'/2','get',{},false, function (res) {
            if(res&&res.data){
                mdm_tabs.value = []
                mdm_tabs.value = res.data.data.list
                
            }
        })
    }
    getTheme()
    
    
    const tabclick1 = (item,i)=>{
        mdm_tab_index.value = i
        newlist(item.id)
    }
    newlist('')
    // 企业管理
    const qygl_list = ref([])
    const getqygl_list=()=>{
        const id = module_list.value[1].id
        proxy.$http.request(proxy.$api.list_news+'?nextTag=0&nid='+id+'&pageSize=7&prevTag=0','get',{},false, function (res) {
            if(res&&res.data){
                if(res.data.data.list!= undefined){
                    qygl_list.value = res.data.data.list
                } 
            }
        })
    }
    
    const qygl_img_list =[]
    const more2 =(type)=>{
        
    }
    // 企业党建
    const qydj_list = ref([])
    const getqydj_list = ()=>{
        const id = module_list.value[2].id
        proxy.$http.request(proxy.$api.list_news+'?nextTag=0&nid='+id+'&pageSize=7&prevTag=0','get',{},false, function (res) {
            if(res&&res.data){
                if(res.data.data.list!= undefined){
                    qydj_list.value = res.data.data.list
                } 
            }
        })
    }
    const qydj_img_list =[]
    const more3 =(type)=>{
    }
    // 企业科创
    const qykc_list = ref([])
    const getqykc_list=()=>{
        const id = module_list.value[3].id
        proxy.$http.request(proxy.$api.list_news+'?nextTag=0&nid='+id+'&pageSize=7&prevTag=0','get',{},false, function (res) {
            if(res&&res.data){
                if(res.data.data.list!= undefined){
                    qykc_list.value = res.data.data.list
                } 
            }
        })
    }
    
    const qykc_img_list =[]
    const more4 =(type)=>{
        ElMessage('企业科创');
    }
    // 媒体看台
    const mtkt_list =ref([])
    const getmtkt_list=()=>{
        const id = module_list.value[4].id
        proxy.$http.request(proxy.$api.list_news+'?nextTag=0&nid='+id+'&pageSize=4&prevTag=0','get',{},false, function (res) {
            if(res&&res.data){
                if(res.data.data.list!= undefined){
                    mtkt_list.value = res.data.data.list
                } 
            }
        })
    }
    
    const more5 =(type)=>{
    }
    // 阅读推荐榜
    const ydtj_list =ref([])
    const getydtj_list=()=>{
        const id = proxy.$comJs.extract(JSON.parse(localStorage.getItem( 'headerTabs' )),JSON.parse(CryptoJS.AES.decrypt(Router.currentRoute.value.query.ob,'name').toString(CryptoJS.enc.Utf8)),'name')[0].id
        proxy.$http.request(proxy.$api.rankList+'?nextTag=0&nid='+id+'&pageSize=6&rankTag=1','get',{},false, function (res) {
            if(res&&res.data){
                if(res.data.data.list!= undefined){
                    ydtj_list.value = res.data.data.list
                } 
            }
        })
    }
    getydtj_list()
    // 品牌推荐
    const pptj_list =[
        {img: 'https://www.cnr.cn/2022/images/xingzhen0620/guizhou.jpg'},
        {img: 'https://www.cnr.cn/2022/images/xingzhen0620/guizhou.jpg'},
        {img: 'https://www.cnr.cn/2022/images/xingzhen0620/guizhou.jpg'},
        {img: 'https://www.cnr.cn/2022/images/xingzhen0620/guizhou.jpg'},
        {img: 'https://www.cnr.cn/2022/images/xingzhen0620/guizhou.jpg'},
        {img: 'https://www.cnr.cn/2022/images/xingzhen0620/guizhou.jpg'},

    ]
    const more6 =(type)=>{
        ElMessage('品牌推荐');
    }
    // 页面模块权限
  const seek=(id)=>{
    var flag = false
    list_children.map((item)=>{
      if(item.id == id){
        flag = true
      }
    })
    return flag
  }
  const sort_module=()=>{
    module_list.value.map((item,i)=>{
      item.show = seek(item.id)
      if(item.id == 14&&seek(item.id)){
        getdataOpenList()
      }
      if(item.id == 15&&seek(item.id)){
        getqygl_list()
      }
      if(item.id == 16&&seek(item.id)){
        getqydj_list()
      }
      if(item.id == 17&&seek(item.id)){
        getqykc_list()
      }
      if(item.id == 18&&seek(item.id)){
        getmtkt_list()
      }
      if(item.id == 147&&seek(item.id)){
        getTheme()
      }
      
    })
  }
  sort_module()
  const more =(id,title)=>{
    Router.push({
        path:'/animatedly/list',
        query:{
          ob:proxy.$comJs.encry({
            title:title,
            id:id,
            first_title:'创新企业',
          })
        }
      });
  }
  const goInfo=(item,name)=>{
    const routeUrl = Router.resolve({
        path:'/animatedly/info',
        query:{
            ob:proxy.$comJs.encry({
                title:name,
                id:item.newsId,
                path:'/animatedly/list',
                first_title:'创新活动',
                first_path:-1
            })
        }
    });
    window.open(routeUrl.href, "_blank");
  }
</script>

<style lang='less' scoped>
.el-col-lg-4-8 {
		width: 20%;
	}
    .ad1-view{
        div{
            margin-right: 20px;
        }
    }
    .bjview{
        width: 20px;
        height: 20px;
        border-radius: 50%;
        color: #fff;
        font-size: 8px;
        line-height: 20px;
        background: #d10b00;
        text-align: center;
    }
</style>

